<template>
    <div id="login">
        <div class="login">
            <div class="loginOut">
                <div class="loginTitle">化验室流程辅助系统</div>
                <div class="loginBox">
                    <p>登录</p>
                    <el-form
                        :model="form"
                        :rules="rules"
                        ref="formRef"
                    >
                        <el-form-item
                            prop="username"
                            required
                        >
                            <el-input
                                class="loginIpt"
                                v-model="form.username"
                                placeholder="请输入已验证手机号"
                                size="large"
                            />
                        </el-form-item>
                        <el-form-item
                            prop="password"
                            required
                        >
                            <el-input
                                class="loginIpt"
                                type="password"
                                v-model="form.password"
                                placeholder="请输入密码"
                                size="large"
                            />
                        </el-form-item>
                    </el-form>
                    <el-button
                        @click="toHome(formRef)"
                        class="loginBtn"
                        type="primary"
                        size="large"
                        v-loading="loginLoading"
                    >登 录</el-button>
                </div>
                <div class="loginImg">
                    <img src="../assets/loginImg.png">
                </div>
            </div>
        </div>
        <div
            class="qrcode"
            @click="openQrCode"
        >
            <!-- <img
                src="../assets/images/qrcode.png"
                alt=""
            > -->
        </div>
        <el-dialog
            v-model="dialogVisible"
            title="移动端"
            width="400"
        >
            <!-- <div class="dialogQrCode">
                <img
                    src="../assets/qrcodeDownlod.png"
                    alt=""
                >
            </div> -->
            <div class="dialogQrCodeTitle">Android版扫码下载</div>
        </el-dialog>
    </div>
</template>

<script setup>
import loginHttp from "@/https/login.js";
import menuHttp from "@/https/menu.js";
import { getMenuRoutes } from "@/utils/menuAuth.js";
import Storage from "@/utils/storage.js"; // storage工具类，简单的封装
import { ElMessage } from "element-plus";
import { reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
const formRef = ref();
const router = useRouter();
const route = useRoute();
const rules = reactive({
    username: [{ required: true, message: "请输入账号", trigger: "blur" }],
    password: [{ required: true, message: "请输入密码", trigger: "blur" }],
});
const dialogVisible = ref(false)
const loginLoading = ref(false)
const form = reactive({
    username: "",
    password: "",
});
const toHome = async (formRef) => {
    if (!formRef) return;
    await formRef.validate((valid, fields) => {
        if (valid) {
            loginLoading.value = true
            loginHttp.login(form).then((res) => {
                if (res.data.code == 200) {
                    Storage.localSet(
                        "tokenValue",
                        res.data.data.tokenInfo.tokenValue
                    );
                    Storage.localSet(
                        "tokenName",
                        res.data.data.tokenInfo.tokenName
                    );
                    Storage.localSet(
                        "loginId",
                        res.data.data.tokenInfo.loginId
                    );
                    Storage.localSet("depId", res.data.data.depId);
                    Storage.localSet("username", res.data.data.username);
                    Storage.localSet("realName", res.data.data.realName);
                    Storage.localSet("userId", res.data.data.id);
                    Storage.localSet("roleIds", res.data.data.roleIds);
                    Storage.localSet("roleNames", res.data.data.roleNames);
                    menuRoleKey(res.data.data.roleIds)
                    getMenuRoutes(() => { }, toDataView);
                    ElMessage({
                        message: "登录成功",
                        type: "success",
                    });
                    loginLoading.value = false
                } else {
                    ElMessage({
                        message: res.data.msg,
                        type: "error",
                    });
                    loginLoading.value = false
                }
            });
        } else {
            // console.log('error')
        }
    });
};

const menuRoleKey = async (roleIds) => {
    const res = await menuHttp.menuRoleKey({
        roleIdList: roleIds,
    });
    if (res.data.code === 200) {
        Storage.localSet("roleKeyList", res.data.data);
        console.log(res.data.data)
    }
};

const toDataView = () => {
    const menuList = JSON.parse(Storage.localGet("menuList"))[0].children;
    console.log(menuList, router.getRoutes(), 'menuList')
    for (let i = 0; i < menuList.length; i++) {
        if (menuList[i].hasAuth) {
            if (menuList[i].children && menuList[i].children.length > 0) {
                router.push({ path: menuList[i].children[0].path });
                break;
            } else {
                router.push({ path: menuList[i].path });
                break;
            }
        }
    }
};
</script>

<style scoped lang="less">
#login {
    height: 100%;
    width: 100%;
    min-width: 1200px;
    min-height: 720px;
    background: #8ebc7d;
    position: relative;
    .qrcode {
        position: absolute;
        right: 40px;
        bottom: 40px;
        cursor: pointer;
        img {
            width: 50px;
            height: 50px;
        }
    }
}

.login {
    width: 100%;
    height: 50%;
    background: #8ebc7d;
    position: relative;

    .loginOut {
        bottom: -230px;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        flex-direction: row;
        .loginTitle {
            position: absolute;
            top: -60px;
            width: 790px;
            text-align: center;
            color: #fff;
            font-size: 24px;
            font-weight: 300;
        }
        .loginImg {
            img {
                height: 460px;
            }
        }
    }
    .loginBox {
        width: 395px;
        height: 460px;
        box-sizing: border-box;
        padding: 50px 30px;
        background: #fff;
        p {
            font-size: 28px;
            font-weight: bold;
            text-align: center;
            letter-spacing: 10px;
            margin-bottom: 40px;
            margin-top: 20px;
        }
        .loginIpt {
            margin: 4px 0;
            height: 48px;
        }

        .loginBtn {
            width: 335px;
            height: 48px;
            background: #58be3f;
            border: none;
            margin-top: 40px;
        }
    }
}
.dialogQrCode {
    text-align: center;
    padding: 20px 0;
    img {
        width: 200px;
        height: 200px;
    }
}
.dialogQrCodeTitle {
    text-align: center;
    padding-bottom: 30px;
}
</style>
